<script setup>
defineProps(['title'])
// defineEmits 通过该函数 可以去定义传递给父组件事件的名称
// 在$emit执行的方法不能在js中使用
const emit = defineEmits(['enlarge-text'])


import {ref} from "vue";
let b = ref(2)
// 可以通过defineEmits的返回值来调用
function buttonClick() {
  // 该方法无返回值
  let a = emit('enlarge-text', b.value)
  console.log(a)
}
</script>

<template>
<!--  <div class="blog-post">-->
<!--    <h4>{{ title }}</h4>-->
<!--&lt;!&ndash;    子组件通过$emit函数执行来告诉父组件&ndash;&gt;-->
<!--    <button @click="$emit('enlarge-text')">Enlarge text</button>-->
<!--  </div>-->

<!--  演示子传父带参数-->
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <!--    子组件通过$emit函数执行来告诉父组件-->
<!--    <button @click="$emit('enlarge-text', 1)">Enlarge text</button>-->
    <button @click="buttonClick">按钮</button>
  </div>




</template>

<style scoped>

</style>